<!DOCTYPE html>
<html class="share_bg">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>title</title>
	<link rel="stylesheet" type="text/css" href="../../css/api.css" />
	<link rel="stylesheet" type="text/css" href="../../css/swiper.min.css" />
	<link rel="stylesheet" type="text/css" href="./css/my.css" />
</head>
<style type="text/css">
	.swiper-slide {
		width: 76% !important;
	}

	.swiper-slide .main-img {
		width: 92%;
	}

	.indexbanner {
		width: 100%;
		height: 100%;
		overflow: hidden;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9999999;
		background: rgba(51, 51, 51, 0.9);
		display: none;
	}

	.mask_close {
		width: 30px;
		height: 30px;
		position: fixed;
		right: 20px;
		top: 5%;
		z-index: 999992;
	}

	.mask_close img {
		width: 30px;
		height: 30px;
	}

	.contenttop_js {
		width: 100%;
		text-align: center;
		position: fixed;
		top: 50%;
		transform: translateY(-50%);
		z-index: 99999;
	}

	.share_photo {
		margin: 0 auto;
		width: 70%;
		height: auto;
		overflow: hidden;
	}

	.share_tip {
		width: 100%;
		height: auto;
		overflow: hidden;
		color: #fff;
		margin-bottom: 8px;
		font-size: 17px;
	}

	.imgDetailBox {
		border-radius: 8px;
		background: #fff;
		padding: 5px;
	}

	.imgDetailBox img {
		width: 100%
	}

	.fixed_btn {
		width: 100%;
		height: 40px;
		margin-top: 10px;
		font-size: 14px;
	}

	.fixed_btn_item {
		width: 47%;
		height: 40px;
		line-height: 40px;
		background: -webkit-linear-gradient(left, #f24fad, #8414c3);
		text-align: center;
		float: left;
		color: #fff;
		border-radius: 100px;
	}

	.fixed_btn .fixed_btn_item:last-child {
		background: -webkit-linear-gradient(left, #f96792, #ff8250);
		float: right;
	}

	.sharebg {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.0);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 100000
	}

	.share_mode {
		width: 100%;
		height: auto;
		overflow: hidden;
		background: #ededed;
		position: fixed;
		left: 0px;
		bottom: 0px;
		border-radius: 10px 10px 0 0
	}

	.colse_btn {
		width: 100%;
		height: 40px;
		text-align: center;
		line-height: 40px;
		position: relative;
		color: #323232;
		font-size: 14px;
	}

	.colse_btn:before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		background: #e6e6e6;
		right: 0;
		height: 1px;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		-webkit-transform-origin: 0 0;
		transform-origin: 0 0;
	}

	.share_title {
		width: 100%;
		height: 45px;
		line-height: 45px;
		text-align: center;
		color: #323232;
		position: relative;
		font-size: 14px;
	}

	.share_title:before {
		content: '';
		position: absolute;
		left: 0;
		bottom: 0;
		background: #e6e6e6;
		right: 0;
		height: 1px;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		-webkit-transform-origin: 0 0;
		transform-origin: 0 0;
	}

	.share_content {
		width: 100%;
		height: auto;
		overflow: hidden;
	}

	.share_content p {
		color: #ff2526;
		font-size: 12px;
		width: 90%;
		margin: 10px auto;
		line-height: 20px;
	}

	.share_modes {
		width: 100%;
		height: auto;
		overflow: hidden;
		margin: 0 auto;
		margin-top: 15px;
	}

	.share_info {
		width: 33.33%;
		float: left;
		text-align: center;
		margin-bottom: 15px;
		height: 80px;
		overflow: hidden;
	}

	.share_info img {
		width: 50px;
		height: 50px;
		margin: 0 auto;
		text-align: center;
	}

	.share_info text {
		display: block;
		color: #808080;
		font-size: 13px;
		margin-top: 5px;
	}
</style>

<body class="share_bg">
	<div class="share_poster">
		<div class="poster_rule">
			<span>邀请规则</span>
		</div>
		<div class="poster_content_info">
			<div class="poster_title">
				<img src="./image/share_title.png">
			</div>
			<div class="poster_invitationcode">
				<div class="poster_invitationcode_fl">
					<span>我的邀请码:</span>
					<label id="invitation_code"></label>
				</div>
				<div class="poster_invitationcode_fr" tapmode onclick="copycode()">复制</div>
			</div>
		</div>
		<div class="poster_connect">
			<div class="poster_connect_fl">
				<img src="./image/poster_connect.png" />
			</div>
			<div class="poster_connect_fl">
				<img src="./image/poster_connect.png" />
			</div>
		</div>
	</div>

	<div class="swiper_list">
		<div class="swiper-container">
			<div class="swiper-wrapper" style="margin-top:23px;" id="sharepost">
			</div>
		</div>
	</div>
	<div class="poster_h_seat"></div>
	<div class="poster_fixed">
		<div class="poster_btn_down">
			<div class="poster_download" tapmode onclick="makepic()">
				<img src="./image/icon_ewm.png">
				<span>生成海报</span>
			</div>
			<div class="poster_copy_code" tapmode onclick="copylink()">
				<span>复制邀请链接</span>
			</div>
		</div>
	</div>
	<!--海报分享弹框-->
	<div class="indexbanner">
		<div class="mask_close">
			<img src="./image/guanbi.png" />
		</div>
		<div class="contenttop_js">
			<div class="share_photo">
				<div class="share_tip">保存后请到相册查看~</div>
				<div class="imgDetailBox">
					<img id="poster" src="../../image/hb.jpg">
				</div>
				<div class="fixed_btn">
					<div class="fixed_btn_item  savetext" tapmode onclick="copylink()">复制文案</div>
					<div class="fixed_btn_item saveimg">分享图片</div>
				</div>
			</div>
		</div>
	</div>
	<!--邀请规则-->
	<div class="pay_style_box" style="display:none">
		<div class="pay_style_content">
			<div class="pay_style_c">
				<div class="pay_style_titles">邀请规则</div>
				<div class="poster_rule_content">
					·可直接复制邀请码给好友下载APP注册填写<br /> ·邀请海报已包含您的专属二维码和邀请链接
					<br /> ·好友通过您的邀请码或者邀请海报注册会员并下载APP后，Ta将永久成为您的下级会员，未来Ta产生的订单佣金您都有奖励，会自动计入您的账户中！
					<br />
				</div>
			</div>
			<div class="widthdraw_close"><img src="./image/guanbi.png"></div>
		</div>
	</div>
	<canvas id="sharecanvas" style="background-color:white; width:80%;display: none;" class="am-text-center am-center"></canvas>
	<div class="sharebg" style="display:none">
		<div class="share_mode">
			<div class="share_title">
				分享方式
			</div>
			<div class="share_content">
				<p>
					*注:由于新版微信调整了分享策略，如果遇到多图无法分享至朋友圈，请先保存图片再打开微信分享。
				</p>
				<div class="share_modes">

					<div class="share_info saveimg">
						<img src="../../image/save_01.png">
						<text>
					保存图片
				</text>
					</div>
					<div class="share_info copywenan">
						<img src="../../image/save_02.png">
						<text>
				复制文案
				</text>
					</div>
					<div class="share_info wxshare">
						<img src="../../image/save_03.png">
						<text>
					微信
				</text>
					</div>
					<div class="share_info friendsshare">
						<img src="../../image/save_04.png">
						<text>
				朋友圈
				</text>
					</div>
					<div class="share_info kongjianshare">
						<img src="../../image/save_05.png">
						<text>
				QQ空间
				</text>
					</div>
					<div class="share_info qqshare">
						<img src="../../image/save_06.png">
						<text class="copybtn">
					QQ
				</text>
					</div>
				</div>
			</div>
			<div class="colse_btn">
				取消分享
			</div>
		</div>
	</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/config.js"></script>
<script type="text/javascript" src="../../script/swiper.min.js"></script>
<script type="text/javascript" src="../../script/zepto.min.js"></script>
<script type="text/javascript" src="../../script/doT.min.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/canvasImg.js"></script>
<script type="text/javascript" src="../../script/opensdk.js"></script>
<script id="sharepost-tmpl" type="text/x-dot-template">
	{{ for(var i=0, len=it.length; i
	<len; i++) {}} <div class="swiper-slide" data-hbid="{{=it[i].shareid}}" id="hbid_{{=i}}"><img onload="imageCache(this,{thumbnail:false})" src="{{=it[i].sharepic}}" class="main-img"></div>
		{{ }}}
</script>
<script type="text/javascript">
	// 当前页需要的全局变量
	var userinfo;
	var shareData; //海报数据
	var shareid; //海报id
	var shareimgurl;
	var shareImg;
	var sharetext = ""; //分享内容
	apiready = function() {
		userinfo = isLogin();
		doGetCode();
		doSaveimg();
	};
	$(document).ready(function() {

	});

	function doGetCode() {
		showProgress();
		$("#invitation_code").text(parseInt(userinfo.id) + 4000);
		var data = new Object();
		postData(API_URL + 'getSharePic', {}, function(ret) {
			hideProgress();
			if (ret.code == 1) {
				shareData = ret.data;
				shareid = shareData[0]['shareid'];
				shareimgurl = shareData[0]['sharepic'];
				var sortitemtpl = doT.template(($('#sharepost-tmpl').text()));
				$("#sharepost").append(sortitemtpl(shareData));
				initswipe();
				iCache($('.main-img'));
			}
		});
		initclick();
	}

	function copycode() {
		var invitation_code = $("#invitation_code").text();
		copyWord('Tip:邀请码' + invitation_code, true);
	}

	function copylink() {
		sharetext = getStorage('sharetext');
		if (!sharetext) {
			showProgress();
			getDataApiTwo({
				post: true,
				apiname: 'open_shorturl_sina_get.ashx',
				content: encodeURI(_DOMAIN + '/shareapp.html?code=' + (parseInt(userinfo.id) + 4000))
			}, function(ret, err) {
				hideProgress();
				if (ret.status == 200) {
					sharetext = ret.shorturl;
					setStorage('sharetext', sharetext);
					copyWord('Tip:邀请链接' + sharetext, true);
				} else {
					showToast('链接生成失败~')
				}
			})
		}
	}


	function initclick() {
		$(".poster_rule").unbind('click').click(function() {
			$(".pay_style_box").show();
		});
		$(".widthdraw_close").unbind('click').click(function() {
			$(".pay_style_box").hide();
		});
		$('.colse_btn').click(function() {
			$('.sharebg').hide();
		});
		$('.mask_close').unbind('click').click(function() {
			$(".indexbanner").hide();
		})
	}

	function doSaveimg() {
		$('.saveimg').click(function() {
			showToast('已保存到相册!');
		});
		$('.wxshare').click(function() {
			opensdk.wx.shareImage('session', shareImg, shareImg);
		});
		$('.qqshare').click(function() {
			opensdk.qq.shareImage('QFriend', shareImg);
		});
		$('.kongjianshare').click(function() {
			opensdk.qq.shareImage('QZone', shareImg);
		});
		$('.friendsshare').click(function() {
			opensdk.wx.shareImage('tinimele', shareImg, shareImg);
		});
		$('.copywenan').click(function() {
			copylink();
		});
	}


	function initswipe() {
		var mySwiper = new Swiper('.swiper-container', {
			slidesPerView: 'auto',
			centeredSlides: true,
			watchSlidesProgress: true,
			paginationClickable: true,
			on: {
				slideChange: function() {
					//	console.log(mySwiper.activeIndex);
					shareid = shareData[mySwiper.activeIndex]['shareid'];
					shareimgurl = shareData[mySwiper.activeIndex]['sharepic'];
					//console.log(shareid);
				},
			},
		})
	};

	function makepic() {
		showProgress('生成图片中');
		downloadPic(shareimgurl, function(ret) {
			var info = {
				url: ret,
				itemid: 'sharepic' + shareid,
				logoimg: '../../image/logo.png'
			};
			CanvasImg.makeQrcode({
				text: DOMAIN + '/shareapp.html?code=' + (parseInt(isLoginOr().id) + 4000),
				itemid: 'sharepic' + shareid
			}, function(ret) {
				CanvasImg.canvasShareImg(info, ret, parseInt(isLoginOr().id) + 4000, function(ret) {
					hideProgress();
					$('.sharebg').show();
					shareImg = ret;
					console.log(ret);
				})
			})
		});
	}
	//下载图片
	function downloadPic($fileurl, cb) {
		if (!$fileurl) {
			return;
		}
		$localfile = $fileurl.split('/');
		$filename = $localfile[$localfile.length - 1];
		$localpath = 'fs://yqlm/' + $filename;
		api.download({
			url: $fileurl,
			savePath: $localpath,
			report: true,
			cache: true,
			allowResume: true
		}, function(ret, err) {
			if (ret.state == 1) {
				typeof cb == "function" && cb(ret.savePath);
			} else {}
		});

	}
</script>

</html>
